<template>
  <a-modal v-model:visible="visible" :maskClosable="false" :title="title">
    <a-form
      ref="formRef"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <template v-if="type === 'add'">
        <a-form-item label="上级菜单">
          <a-input :value="parentData.parentTitle" readonly />
        </a-form-item>
        <a-form-item label="上级权限" v-if="parentData.parentPerm">
          <a-input :value="parentData.parentPerm" readonly />
        </a-form-item>
      </template>
      <a-form-item
        label="菜单名称"
        name="title"
        :rules="[{ required: true, message: '请填写菜单名称' }]"
      >
        <a-input v-model:value="form.title" />
      </a-form-item>
      <a-form-item
        label="权限"
        name="perm"
        :rules="[{ required: true, message: '请填写菜单权限' }]"
      >
        <a-input v-model:value="form.perm" :readonly="type === 'edit'" />
      </a-form-item>
      <a-form-item label="路径" name="path">
        <a-input v-model:value="form.path" />
      </a-form-item>
      <a-form-item label="图标" name="icon">
        <a-input v-model:value="form.icon" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-switch
          v-model:checked="form.status"
          checked-children="启动"
          un-checked-children="禁用"
        />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="form.sort" :min="1" :precision="0" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="cancel" :loading="loading">取消</a-button>
      <a-button danger v-if="type === 'edit'" type="primary" v-acl="['sys:menu:del']" :loading="loading" @click="del()"
        >删除</a-button
      >
      <a-button type="primary" :loading="loading" @click="submit(false)"
        >确定</a-button
      >
      <a-button
        type="primary"
        v-if="type === 'add'"
        :loading="loading"
        @click="submit(true)"
        >保存并继续</a-button
      >
    </template>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, Ref, toRefs, defineExpose } from "vue";
import type { FormInstance } from "ant-design-vue";
import systemApis from "@/apis/system";
import { Modal } from "ant-design-vue";
export default defineComponent({
  name: "MenuEditForm",
  setup(props, { emit }) {
    const formRef = ref<FormInstance>();
    const state = reactive({
      form: {
        parentId: 0,
        perm: "",
        title: "",
        path: "",
        icon: "",
        type: 0,
        status: true,
        sort: undefined,
        id: "",
      },
      visible: false as boolean,
      needUpdate: false as boolean,
      type: "add",
      title: "",
      parentData: {} as any,
      loading: false as boolean,
    });

    const open = (type: "add" | "edit", data: any = {}) => {
      state.type = type;
      state.visible = true;
      state.needUpdate = false;
      state.title = type === "add" ? "新增菜单" : "编辑菜单";
      if (type === "add") {
        state.parentData = {
          parentId: data.parentId,
          parentTitle: data.parentTitle,
          parentPerm: data.parentPerm,
          type: data.type,
        };
        state.form = {
          id: "",
          parentId: state.parentData.parentId,
          perm: state.parentData.parentPerm
            ? `${state.parentData.parentPerm}:`
            : "",
          title: "",
          path: "",
          icon: "",
          type: state.parentData.type,
          status: true,
          sort: undefined,
        };
      } else {
        state.form = {
          parentId: data.parentId,
          perm: data.perm,
          title: data.title,
          path: data.path,
          icon: data.icon,
          type: data.type,
          status: data.status,
          sort: data.sort,
          id: data.id,
        };
      }
      console.log(data);
    };

    const submit = async (_continue: boolean = false) => {
      try {
        const values = await formRef.value?.validateFields();
        console.log(values, state.form);
        if (state.type === "add") {
          const res: any = await systemApis.createMenu(state.form);
          if (res.code === 0) {
            state.needUpdate = true;
            if (_continue) {
              state.form = {
                id: "",
                parentId: state.parentData.parentId,
                perm: state.parentData.parentPerm
                  ? `${state.parentData.parentPerm}:`
                  : "",
                title: "",
                path: "",
                icon: "",
                type: state.parentData.type,
                status: true,
                sort: undefined,
              };
              formRef.value?.resetFields();
            } else {
              cancel();
            }
          }
        }
        if (state.type === "edit") {
          const res: any = await systemApis.editMenu(state.form);
          if (res.code === 0) {
            state.needUpdate = true;
            formRef.value?.resetFields();
            cancel();
          }
        }
      } catch (err) {}
    };

    const cancel = () => {
      if (state.needUpdate) {
        emit("submit");
      }
      state.visible = false;
    };
    const del = () => {
      Modal.confirm({
        title: "是否删除当前菜单?",
        content: "删除后数据无法找回",
        async onOk() {
          const res: any = await systemApis.delMenu(state.form.id);
          if (res.code === 0) {
            state.needUpdate = true;
            cancel();
          }
        },
      });
    };
    return {
      formRef,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      open,
      submit,
      cancel,
      del,
      ...toRefs(state),
    };
  },
});
</script>